<template>
	<view>
		<u-navbar :is-back="false" :background="background" :title="selectedTabbar.text" ></u-navbar>
		<view >
			<component v-if="selectedTabbar != '' " ref="activeIndex" v-bind:selectedTabbar="selectedTabbar" :is="activeIndex" />
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="tabbar" @change="change"></u-tabbar>
	</view>
</template>

<script>
	import homeIndex from '@/pages/home/home-index.vue'
	import shopIndex from '@/pages/shop/shop-index.vue'
	import chatIndex from '@/pages/chat/chat-index.vue'
	import meIndex from '@/pages/me/me-index.vue'
	export default {
		name: 'TabbarIndex',
		components: {
			homeIndex,
			shopIndex,
			chatIndex,
			meIndex
		},
		data() {
			return {
				tabbar: [],
				current: 0,
				activeIndex: 'homeIndex',
				selectedTabbar: '',
				background: {
					backgroundColor: '#91c5f3'
					// backgroundSize: 'cover',
										
					// 渐变色
					 //backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			}
		},
		created() {
			this.$u.get('/getAppRouters').then(res => {
				if (res.code != 200) {
					this.$u.toast("系统正在维护升级中。。。");
					return;
				}
				this.tabbar = res.data;
				this.selectedTabbar = this.tabbar[this.current];
				});
		},
		methods: {
			change(index) {
				this.current = index;
				let tabbarObj = this.tabbar[this.current];
				this.selectedTabbar = tabbarObj;
				this.activeIndex = tabbarObj.component;
			}
		}
	}
</script>

<style>
</style>
